---
title: "Color Slider"
description: A horizontal or vertical slider used to adjust individual color properties like hue, saturation, or brightness.
order: 4
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ColorSlider.html#props"]
---

## Basic
Glide through gradients to select the perfect intensity or shade, as effortlessly as slipping into your favorite jeans.
<How minW60 toUse="colors/color-slider/color-slider-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/color-slider
```

## Composed components
<Composed components={['color-thumb', 'field']}/>

## Manual installation
```bash
npm i react-aria-components
```
<SourceCode toShow='color-slider'/>

## Anatomy
```
import { ColorSlider } from "@/components/ui/color-slider"

<ColorSlider channel="hue" />
```

## With label
Enhance the color slider by adding a label for clarity and accessibility.
<How minW60 toUse="colors/color-slider/color-slider-with-label-demo" />

## Orientation
By default, the color slider is horizontal. You can change it to vertical by setting the `orientation` prop to `vertical`.
<How minW60 toUse="colors/color-slider/color-slider-vertical-demo" />

## Controlled
Take direct control over the color slider's value.
<How minW60 toUse="colors/color-slider/color-slider-controlled-demo" />

## Disabled
Disable interaction with the color slider using the `isDisabled` prop.
<How minW60 toUse="colors/color-slider/color-slider-disabled-demo" />
